<%# locals: (tabs:) %>
<div class="sm:block mb-6">
  <nav class="isolate flex divide-x divide-gray-200 rounded-lg shadow" aria-label="Tabs">
    <% tabs.each_with_index do |(label, url, active), i| %>
      <% active = (request.path == url) if active.nil? %>
      <a
        href="<%= url %>"
        class="group flex items-center justify-center relative min-w-0 flex-1 overflow-hidden <%= (i == 0) ? "rounded-l-lg" : ((i == tabs.size - 1) ? "rounded-r-lg" : "") %> px-4 py-4 text-center text-sm bg-white font-medium focus:z-10 <%= active ? "text-orange-600 hover:text-orange-700 hover:bg-orange-50" : "text-gray-500 hover:text-orange-500 hover:bg-orange-50" %>"
      >
        <span><%= label %></span>
        <span aria-hidden="true" class="absolute inset-x-0 bottom-0 h-0.5 <%= active ? "bg-orange-600" : "bg-transparent" %>"></span>
      </a>
    <% end %>
  </nav>
</div>
